<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="panTheMap" />
  <title>HERE Maps API Example: Panning the Map</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="libs/jQl.min.js"></script>

  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript"
    data-map-container="mapContainer"
    data-params="maps"
    data-callback="afterHereMapLoad" >
  </script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Panning the Map</h1>

   <div id="showCoords" style="height: 2.0em; font-size: 2em; color: blue;"></div>
  <div id="mapContainer" style="width:540px; height:334px;"></div>

<script id="example-code" data-categories="map" type="text/javascript" >
//<![CDATA[
var map,
  myInterval = 0,
  myTimer,
  incX = 1,
  incY = 2,
  x = 0,
  y = 0;

function panTheMap() {
  x = x + incX;
  if (Math.abs(x) > 20) {
    incX = -incX;
  }

  y = y + incY;
  if (Math.abs(y) > 20) {
    incY = -incY;
  }

  $('#showCoords').text('Pan from: ' + 0 + ',' + 0 + ' to:' + x + ',' + y);
  map.pan(0, 0, x, y);
}


function afterHereMapLoad(theMap) {
  map = theMap;
  map.set('center', new nokia.maps.geo.Coordinate(19.11, 72.89));
  map.setZoomLevel(3);
  setInterval(panTheMap, 300);
}

//]]>
</script>
<script type="text/javascript" src="libs/prettyprint.js"></script>
</body>
</html>